<template>
  <div class="current-level">
    <box title="实时水位变化">
      <div class="main">
        <echart :option="option" v-if="isShow"></echart>
        <div class="null" v-else>
          <span class="text">暂无数据</span>
          <img src="~@/assets/waterLevel/null.png" alt="" class="img" />
        </div>
      </div>
    </box>
  </div>
</template>
  <script>
import box from "../box.vue";
import echart from "@/components/echart/index.vue";
import option from "./option";
import { api } from "@/api";

export default {
  props: {
    date: {
      type: String,
      default: "",
    },
  },
  components: {
    box,
    echart,
  },
  data() {
    return {
      option,
      projectCode: "QJDQ",
      selectOpt: [],
      selectVal: "",
      isShow: false,
    };
  },

  methods: {
    async getWaterCurveData(date) {
      if (!date) date = this.getDafaultDate();
      const res = await api.getWaterCurveData();
      this.isShow = res.length;
      const { createTime, baseValue, lowestValue } = this.toObj(res);
      this.option.xAxis[0].data = createTime;
      this.option.series[0].data = baseValue;
      this.option.series[1].data = lowestValue;
    },
    toObj(arr) {
      const result = {};
      arr.forEach((item) => {
        for (const key in item) {
          if (item.hasOwnProperty(key)) {
            if (!result[key]) result[key] = [];
            result[key].push(
              item[key] - 0 == item[key] ? item[key] - 0 : item[key]
            );
          }
        }
      });
      return result;
    },
    getDafaultDate() {
      let currentDate = new Date();
      currentDate.setDate(currentDate.getDate());
      let year = currentDate.getFullYear();
      let month = String(currentDate.getMonth() + 1).padStart(2, "0");
      let day = String(currentDate.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    async getSeries0Title() {
      const { msg } = await this.getConfigKey(
        `Channel.WaterLevel.LongmenTown.QJDQ`
      );
      this.option.series[0].name = msg;
      console.log("msg", msg);
      this.legendTitle = msg;
    },
    async getSeries1Title() {
      const { msg } = await this.getConfigKey(`Channel.WaterLevel.G75.QJDQ`);
      this.option.series[1].name = msg;
      console.log("msg", msg);
      this.legendTitle = msg;
    },
  },
  created() {
    this.getWaterCurveData();
    // this.getSeries0Title();
    // this.getSeries1Title()
  },
  watch: {
    date(v) {
      if (!v) return;
      const date = v.slice(0, 10);
      // this.getWaterCurveData(date);
    },
  },
};
</script>
  <style scoped lang='scss'>
.current-level {
  color: #fff;
  .main {
    height: vh(355px);
    padding-top: vh(20px);
    .null {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #02c9e2;
      justify-content: center;
      padding-top: vh(40px);
      .text {
        margin-bottom: vh(20px);
      }
      .img {
        height: vh(170px);
      }
    }
  }
  .yl-selector {
    width: vw(150px);
    margin-left: vw(62px);

    ::v-deep {
      .el-input__inner {
        background-color: #173d40;
        border-color: #25bade;
        color: white;

        &:hover,
        &:focus,
        &:active {
          border-color: #25bade;
        }

        &::placeholder {
          color: white;
        }
      }

      .el-select-dropdown__item {
        text-align: center;
      }
    }
  }
}
</style>
  